import '../../styles.css'

import styles from './index.module.css'
import {useEffect, useState} from "react";
import {queryAnswerList} from "@/service/api";
import moment from "moment";

export default function MyQuiz() {
    const [quizList, setQuizList] = useState<any[]>([]); // 这里使用 any[] 来简化示例，你可以定义一个更精确的类型

    useEffect(() => {
        queryAnswerList().then(res => {
            if (res.code === 1) {
                setQuizList(res.data)
            } else {
                alert('获取答题记录失败,' + res.msg)
            }
        })
    }, []);
    return (
        <>
            <div className={styles.container}>
                {
                    quizList.map((quiz, index) => {
                        return (
                            <div key={quiz.audioName + quiz.quizTime} className={styles.quiz}>
                                <div className={styles.quiz_info}>
                                    <div className={styles.quiz_title}>
                                        {quiz.audioName}
                                    </div>
                                    <div className={styles.quiz_time}>
                                        {moment(quiz.quizTime).format('YYYY-MM-DD HH:mm:ss')}
                                    </div>
                                </div>
                                <div className={styles.quiz_reward}>
                                    <div className={styles.quiz_award}>
                                        +{quiz.redPacketAmount}元
                                    </div>
                                    <div className={styles.quiz_status}>
                                        {quiz.quizStatusDesc}
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
                {/*<div className={styles.audio}>*/}
                {/*    <div className={styles.audioTitle}>音频：眼睛的奥秘</div>*/}
                {/*    <div className={styles.audioContent}>*/}
                {/*        <span className={styles.time}>2024-03-21 18:24:00</span>*/}
                {/*        <span className={styles.quiz}>答对<span className={styles.quiz_yellow}>1</span>题，答错<span className={styles.quiz_red}>1</span>题</span>*/}
                {/*    </div>*/}
                {/*</div>*/}
            </div>
        </>
    )
}
